<template>
  <div>
    <!-- 地图 -->
    <div class="map-container" id="containerEdit" :style="styleObj"></div>
    <div class="input-card">
      <button class="btn" v-if="isCreate" @click.prevent.stop="createPolygon()">新建</button>
      <button class="btn" v-if="isOpenEdit" @click.prevent.stop="open()">开始编辑</button>
      <button class="btn" v-if="isEndEdit" @click.prevent.stop="close()">结束编辑</button>
    </div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: 'MapEditContainer',
  mixins: [], //混入
  components: {}, //组件
  props: {
    area: {
      type: Array,
      default: () => [
        [119.249783, 26.141502],
        [119.380246, 26.152664],
        [119.331838, 26.065183]
      ],
    },
    lng: {
      type: Number,
      default: 119.30692,
    },
    lat: {
      type: Number,
      default: 26.078093,
    },
    styleObj: {
      type: Object,
      default: () => {
        return {
          width: '100%',
          height: '600px',
        }
      },
    },
    isCreate: {
      type: Boolean,
      default: false,
    },
    isOpenEdit: {
      type: Boolean,
      default: false,
    },
    isEndEdit: {
      type: Boolean,
      default: false,
    },
  }, //集成属性
  data() {
    return {
      map: null,
      marker: null,
      positionInfo: {
        lng: 119.30692,
        lat: 26.078093,
        address: '1111',
        province: '',
        city: '',
        district: '',
        street: '',
        streetNumber: '',
        zipcode: '',
        country: '',
        township: '',
      },
      polygonPath: [], // 存储多边形的顶点坐标
      polygon: null, // 多边形对象
      polylineEditor: null, // 多边形编辑器对象
      imageLayer: null, // 图片图层对象
      isDrawing: false, // 是否正在绘制多边形
      imageUrl: 'https://news-vod.voc.com.cn/2024/09/17/140102ycpniy343192.jpg', // 替换为你的图片URL
    };
  },
  computed: {},
  methods: {
    initPosition() {
      if (this.lng && this.lat) {
        this.$set(this.positionInfo, 'lng', this.lng);
        this.$set(this.positionInfo, 'lat', this.lat);
      } else {
        this.positionInfo.lng = 119.30692
        this.positionInfo.lat = 26.078093
      }

      this.initAMap();
    },

    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: 'd48e7f2bd17c16b4cb757cffbb694b90', //「你申请的安全密钥」
      };
      AMapLoader.load({
        key: '2b05e7179f91bbd5c2c8b9780493cf28', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          'AMap.ToolBar',
          'AMap.Scale', 
          'AMap.Geocoder', 
          'AMap.Geolocation', 
          // 'AMap.PlaceSearch', 
          'AMap.AutoComplete', 
          'AMap.ElasticMarker',
          'AMap.CitySearch',
          'AMap.PolylineEditor',
          'AMap.ImageLayer' // 添加 ImageLayer 插件
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        resizeEnable: true,
      }).then((AMap) => {
        this.map = new AMap.Map('containerEdit', {
          // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 13,       // 初始化地图级别
          center: [this.positionInfo.lng, this.positionInfo.lat], // 初始化地图中心点位置
          scrollWheel: true,              // 是否开启鼠标滚轮缩放
          // 标准（normal）：使用标准样式，可以通过设置地图的mapStyle属性为"amap://styles/normal"来应用。
          // 幻影黑（dark）：使用幻影黑样式，设置mapStyle属性为"amap://styles/dark"。
          // 涂鸦（graffiti）：使用涂鸦样式，设置mapStyle属性为"amap://styles/graffiti"。
          // 酱籽（wine）：使用酱籽样式，虽然在搜索结果中没有直接提到酱籽的样式代码，但通常可以通过"amap://styles/wine"来尝试应用。
          // 远山黛（whitesmoke）：使用远山黛样式，设置mapStyle属性为"amap://styles/whitesmoke"。
          // 草色青（fresh）：使用草色青样式，设置mapStyle属性为"amap://styles/fresh"。
          // 极夜蓝（darkblue）：使用极夜蓝样式，设置mapStyle属性为"amap://styles/darkblue"。
          mapStyle: "amap://styles/normal"
          // mapStyle: 'amap://styles/57994c871bb604a4c79184f5f65d8782'  // 使用黑夜模式样式
          // mapStyle: JSON.stringify(yourCustomStyleJson)  // 替换为你的自定义样式JSON
        });

        this.map.addControl(new AMap.Scale())     // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        this.map.addControl(new AMap.ToolBar())   // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图

        // 强制刷新地图以确保尺寸正确
        this.map.resize();

        // 添加点击事件监听器
        this.map.on('click', (e) => {
          if (this.isDrawing) {
            this.polygonPath.push([e.lnglat.getLng(), e.lnglat.getLat()]);
            this.updatePolygon();
          }
        });

        if(this.area && this.area.length > 0) {
          console.log('this.area', this.area);
          this.polygonPath = this.area;
          this.updatePolygon();
        }
      }).catch((e) => {
        console.log(e);
      });
    },

    // 更新多边形的回调函数
    updatePolygon() {
      this.resetMap();

      this.polygon = new AMap.Polygon({
        path: this.polygonPath,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: '#1791fc',
        zIndex: 50,
      });

      this.map.add(this.polygon);

      // 为多边形添加点击事件监听器
      this.polygon.on('click', (e) => {
        if (this.polygon && this.polygon.contains(e.lnglat)) {
          console.log('你点击了多边形！', e, "=====", this.polygonPath, "=====", this.polygon);
        }
      });

      // 在多边形上贴图
      if (this.polygonPath.length >= 3) {
        AMap.plugin(['AMap.ImageLayer'], () => {
          const bounds = this.polygon.getBounds();
          this.imageLayer = new AMap.ImageLayer({
            url: this.imageUrl,
            bounds,
            opacity: 0.8,
          });
          this.map.add(this.imageLayer);
        });
      }

      // 调整地图缩放比例和中心点，确保多边形完全显示
      if (this.polygonPath.length > 0) {
        this.map.setFitView([this.polygon]); // 调整地图缩放比例和中心点
      }
    },

    createPolygon() {
      this.isDrawing = true;
      this.polygonPath = [];
      this.resetMap();
      console.log('开始绘制多边形');
    },

    open() {
      // 开始编辑多边形
      if (this.polygon) {
        let that = this;
        AMap.plugin(['AMap.PolylineEditor'], () => {
          this.polylineEditor = new AMap.PolylineEditor(that.map, this.polygon);
          this.polylineEditor.open();

          // 监听添加节点变化
          this.polylineEditor.on('addnode', (e) => {
            this.polygonPath = e.target.getPath();
          });

          // 监听拖动调整变化
          this.polylineEditor.on('adjust', (e) => {
            this.polygonPath = e.target.getPath();
          });

          // 监听删除节点变化   直接点击空点节点  就是删除了
          this.polylineEditor.on('removenode', (e) => {
            console.log('删除节点', e);
            this.polygonPath = e.target.getPath();
          });

          // 监听结束编辑变化
          this.polylineEditor.on('end', (e) => {
            console.log('结束编辑', e);
          });
        });
      }
    },

    close() {
      // 结束编辑多边形
      if (this.polygon) {
        this.polylineEditor.close();
        this.updatePolygon();
      }
      this.isDrawing = false;
      this.$emit("pickArea", this.polygonPath)
    },

    resetMap() {
      // 删除 imageLayer
      if (this.imageLayer) {
        this.map.remove(this.imageLayer); // 删除 imageLayer
        this.imageLayer = null; // 清空引用
      }

      // 删除 polygon
      if (this.polygon && this.polygon !== null) {
        this.polygon.destroy();
        this.map.remove(this.polygon); // 从地图中移除 polygon
      }

      // 关闭 polylineEditor
      if (this.polylineEditor && this.polylineEditor !== null) {
        this.polylineEditor.close();
        this.polylineEditor.setTarget();
      }
    }
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.initPosition();
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {
    if (this.map) {
      this.map.destroy();
      this.map = null;
    }
  },
  destroyed: function() {},
};
</script>
<style scoped lang="scss">
.map-container {
  position: relative;
  padding: 0px;
  margin: 10px 0;
}

.addressLabel {
  min-width: 300px;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid #cccccc;
  background-color: white;
}

.input-card {
  position: absolute;
  right: 30px;
  bottom: 30px;
  width: 124px;
  padding: 10px 10px;
  background-color: #cccccc;
  .btn {
    display: block;
    width: 100px;
    margin: 10px auto;
    color: #fff;
    border: none;
    background-color: rgb(26, 120, 28);
  }
}
</style>
